<template>
    <view class="input-item">
        <text class="input-item-label"><text v-if="must==1" style="color: red;">*</text>{{ name }}</text>
        <view class="flex-layout-row">
            <!-- view style="width: 80px; margin-right: 10px" class="input-item-input">
                <input v-model="code" @input="update" type="text" placeholder="Area" />
            </view> -->
            <view class="input-item-input">
                <input v-model="number" @input="update" type="digit" placeholder="Phone Number" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'phone-input',
    props: {
        custom: Boolean,
        bodyStyle: Object,
        name: String,
        icon: String,
		must:String,
    },
    data() {
        return {
            code: '+20',
            number: ''
        };
    },
    methods: {
        update() {
			this.$emit('change', `${this.number}`);
            // this.$emit('change', `${this.code}${this.number}`);
        }
    }
};
</script>

<style lang="scss" scoped>
.input-item {
    display: flex;
    flex-flow: column;
    margin: 20px 0;
    &-label {
        font-size: 16px;
        color: #999;
        margin: 8px 0;
    }
    &-input {
        width: 100%;
        border: 1px solid #999;
        border-radius: 8px;
        padding: 8px 8px;
        display: flex;
        align-items: center;
    }
}
</style>
